<template>
  <div class="header">
    <i v-if="showIcon" @click="dReturn(path)" class="fa fa-chevron-left" aria-hidden="true"></i>
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    components: {},
    props:{
      showIcon:{
        type: Boolean,
        default:true
      },
      path:{
        type:String,
        default:''
      }
    },
    data() {
      return {
      }
    },
    methods:{
      dReturn(path) {
        this.$router.replace(path)
        this.$emit('go-back')
      },
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .header {
    width: 100%
    height: 40px
    background-color: red
    text-align: center
    line-height 40px
    letter-spacing: 2px
    font-size: 18px
    color: white
    position relative
    i {
      position absolute
      left: 2%
      top: 12px
    }
  }
</style>
